<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>武馆培训掠影</title>
<meta name="viewport"
	content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width,user-scalable=0">
<style type="text/css">
body,ul,li,img,div {
	margin: 0;
	padding: 0;
}

ul,li {
	list-style: none;
}

.pic-list li {
	position: relative;
	margin-bottom: 20px;
	text-align: center;
}

.pic-list .pic {
	width: 100%;
}

.pic-list .pic-text {
	position: absolute;
	left: 0;
	bottom: 5px;
	width: 100%;
	height: 24px;
	line-height: 20px;
	padding: 0 15px;
	background: rgba (       0, 0, 0, 0.5 );
	color: #FFF;
	font: 12px/ 24px "宋体";
	height: 24px;
	line-height: 20px;
	padding: 0 15px;
	background: rgba(0, 0, 0, 0.5);
	text-align: left;
	color: #FFF;
	font: 12px/ 24px "宋体";
	height: 24px;
	line-height: 20px;
	padding: 0 15px;
	color: #FFF;
	font: 12px/ 24px "宋体";
	height: 24px;
	line-height: 20px;
	padding: 0 15px;
	background: rgba(0, 0, 0, 0.5);
	text-align: left;
}
</style>

</head>
<body>
<ul class="pic-list">
	<li><img class="pic" src="images/peixun1.jpg" />
	<div class="pic-text">培训掠影1</div>
	</li>
	<li><img class="pic" src="images/peixun2.jpg" />
	<div class="pic-text">培训掠影2</div>
	</li>
	<li><img class="pic" src="images/peixun3.jpg" />
	<div class="pic-text">培训掠影3</div>
	</li>
	<li><img class="pic" src="images/peixun4.jpg" />
	<div class="pic-text">培训掠影4</div>
	</li>
	<li><img class="pic" src="images/peixun5.jpg" />
	<div class="pic-text">培训掠影5</div>
	</li>

</ul>

</body>

</html>